<template>
  <div id="bindPhoneNumber" class="person-detail">
    <div>
      <van-nav-bar :fixed="true" title="绑定新手机" left-arrow @click-left="back" />
    </div>
    <div style="background:#fff;">
      <p class="modifyPhoneNumber-passowrd">
        <svg-icon icon-class="绑定手机号" widthW="1em" heightH="1em"></svg-icon>
        新手机号
      </p>
      <van-cell-group>
        <van-field v-model="sms1" center clearable placeholder="请输入新手机号" />
        <van-field v-model="sms2" center clearable placeholder="请输入短信验证码">
          <van-button slot="button" size="small" plain hairline :disabled=disabled type="primary" @click="sendMessage()"
            style="border:none;color:#DC4630;">{{btnText}}</van-button>
        </van-field>
      </van-cell-group>
      </van-cell-group>
      <van-button type="info" class="next-step-button" @click="confirm()">绑定</van-button>
    </div>
  </div>
</template>
<script>
  import mine from "../../../controller/mine";
  import util from "@/controller/Common/util.js";
  export default {
    name: 'bindPhoneNumber',
    components: {},
    data() {
      return {
        sms1: '',
        newPhoneNumberL: '',
        isSendMessage: true,
        sms2: '',
        second: 60,
        btnText: '获取验证码',
        disabled: false,
      }
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {
      confirm() {
        let data = {
          "code": this.sms2,
          "phone": this.sms1
        }
        mine.security_v1_changePhone(data).then(res => {
          if (res.code == "0") {
            this.$toast("修改成功!");
            this.$router.push({
              path: '/home/mine'
            })
          } else {
            this.$toast(res.msg)
          }
        })
      },
      checkPhone() {
        return util.validatePhoneNum(this.sms1);
      },
      timer() {
        if (this.second > 0) {
          this.second--
          this.disabled = true
          this.btnText = this.second + '秒'
          setTimeout(this.timer, 1000);
        } else {
          this.second = 0
          this.btnText = '获取验证码'
          this.disabled = false
        }
      },
      sendMessage() {
        this.second = 60
        if (this.checkPhone()) {
          mine.user_v1_msg_code(this.sms1).then(res => {
            if (res.code === "0") {
              this.$toast("发送成功");
              this.timer()
            } else {
              this.$toast(res.msg);
              this.second = 0
              this.btnText = '获取验证码'
              this.disabled = false
            }
          });
        } else {
          this.$toast("请输入正确的手机号");
          this.second = 0
          this.btnText = '获取验证码'
          this.disabled = false
        }
      },
      back() {
        this.$router.go(-1)
      }
    }
  }
</script>
<style lang="scss" scoped>
  #bindPhoneNumber>div:nth-child(2) {
    text-align: center;

    .modifyPhoneNumber-passowrd {
      margin: 0;
      text-align: left;
      padding: 20px 35px 20px 35px;
      font-size: 16px;
    }

    .van-cell-group {
      padding: 0 20px;
      color: #BFC2CC;
    }
  }
</style>
<style lang="scss">
  @import '../style/index.scss';
</style>